import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useLocation } from 'react-router-dom';
import {
  CSSTransition,
  SwitchTransition,
  TransitionGroup,
} from 'react-transition-group';

const Transition: FC<PropsWithChildren<{}>> = ({ children }) => {
  const location = useLocation();
  return (
    <TransitionGroup>
      <SwitchTransition mode={'out-in'}>
        <CSSTransition
          unmountOnExit
          key={location.pathname}
          addEndListener={(node, done) => {
            node.addEventListener('transitionend', done, false);
          }}
          appear
          classNames="fade"
        >
          {children}
        </CSSTransition>
      </SwitchTransition>
    </TransitionGroup>
  );
};

export default memo(Transition);
